<template>
  <!--空间图片分类分析-->
  <!--统计不同分类下图片的数量和总大小占比,帮助用户清晰了解各分类的资源分布,优化存储策略.
    由于同一个分类要展示多个信息,可以选择 分组条形图 来展示-->
  <div class="space-category-analyze">
    <a-card title="图库分类占用">
      <v-chart :option="options" style="height: 320px; max-width: 100%" :loading="loading" />
    </a-card>
  </div>
</template>

<script setup lang="ts">
import { computed, ref, watchEffect } from 'vue'
import { getSpaceCategoryAnalyzeUsingPost } from '@/api/spaceAnalyzeController.ts'
import { message } from 'ant-design-vue'
import VChart from 'vue-echarts'
import 'echarts'

interface Props {
  queryAll?: boolean
  queryPublic?: boolean
  spaceId?: string
}

const props = withDefaults(defineProps<Props>(), {
  queryAll: false,
  queryPublic: false,
})

// 图表数据
const dataList = ref<API.SpaceCategoryAnalyzeResponse[]>([])
const loading = ref(false)

/**
 * 加载数据
 */
const fetchData = async () => {
  // 这个条件判断会导致监听无法正常工作，导致多次快速调用API时出现问题。只在需要防止用户重复点击的时候才添加,否则不要添加
  // if (loading) return
  loading.value = true
  const res = await getSpaceCategoryAnalyzeUsingPost({
    queryAll: props.queryAll,
    queryPublic: props.queryPublic,
    spaceId: props.spaceId,
  })
  if (res.code === 0 && res.data) {
    dataList.value = res.data ?? []
  } else {
    message.error('获取数据失败，' + res.message)
  }
  loading.value = false
}
/**
 * 监听变量,改变时触发数据的重新加载
 * 为了让组件的属性变化时重新加载数据，需要使用watchEffect监听所有动态变量
 * watchEffect 会监听 fetchData() 当中所有的响应式变量，当其中的变量发生变化时，会重新执行 fetchData()
 */
watchEffect(() => {
  fetchData()
})

/**
 * 图表配置.
 * 注意:由于dataList是有一个加载过程的,所以需要使用computed计算属性来获取数据,始终根据dataList的值来计算
 */
const options = computed(() => {
  // 从dataList中提取所有分类名称，用于X轴标签
  const categories = dataList.value.map((item) => item.category)
  // 从dataList中提取每类图片的数量，用于图表系列之一的数据
  const countData = dataList.value.map((item) => item.count)
  // 从dataList中提取每类图片的总大小，并转换为MB单位，用于图表系列之二的数据
  const sizeData = dataList.value.map((item) => (item.totalSize / (1024 * 1024)).toFixed(2)) // 转为 MB

  return {
    // tooltip配置项，指定触发提示框的方式。'axis'表示坐标轴触发，即鼠标移动到某一系列时显示该系列的所有数据点的提示信息。
    tooltip: { trigger: 'axis' },

    // legend配置项，图例组件展示了不同数据系列的标记，颜色和名称，帮助用户区分不同的数据系列。
    legend: { data: ['图片数量', '图片总大小'], top: 'bottom' }, // 设置图例位置在底部

    // xAxis配置项，定义X轴类型及数据。这里使用的是类别型X轴，categories数组中的元素作为X轴的标签。
    xAxis: { type: 'category', data: categories },

    // yAxis配置项，定义Y轴。这里定义了两个Y轴，分别对应于图片数量和图片总大小。
    yAxis: [
      // 第一个Y轴，用于展示图片数量，左侧显示
      {
        type: 'value', // 值轴，适用于连续数据
        name: '图片数量', // Y轴名称
        axisLine: { show: true, lineStyle: { color: '#5470C6' } }, // 显示轴线并设置颜色
      },
      // 第二个Y轴，用于展示图片总大小（MB），右侧显示
      {
        type: 'value',
        name: '图片总大小 (MB)',
        position: 'right', // 设置Y轴的位置在右侧
        axisLine: { show: true, lineStyle: { color: '#91CC75' } }, // 显示轴线并设置颜色
        splitLine: {
          lineStyle: {
            color: '#91CC75', // 调整网格线颜色
            type: 'dashed', // 线条样式：可选 'solid', 'dashed', 'dotted'
          },
        },
      },
    ],

    // series配置项，定义图表中每一个数据系列的具体内容。
    series: [
      // 第一个系列：图片数量
      {
        name: '图片数量', // 系列名称，与legend中的对应
        type: 'bar', // 使用柱状图
        data: countData, // 数据来源
        yAxisIndex: 0, // 关联第一个Y轴
      },
      // 第二个系列：图片总大小
      {
        name: '图片总大小', // 系列名称
        type: 'bar', // 使用柱状图
        data: sizeData, // 数据来源
        yAxisIndex: 1, // 关联第二个Y轴
      },
    ],
  }
})
</script>

<style scoped></style>
